<template>
  <div class="normal" @click="seeMore">
    <div class="row-one">
      <div class="title">{{ obj.title }}</div>
    </div>
    <div class="row-two fz12">
      <div class="left">
        <span class="top">置顶</span>
        <span class="origin">{{ obj.source }}</span>
        <span class="time">{{(obj.createTime).substring(0, 10)}}</span>
      </div>
      <div class="right">{{ obj.view }}阅读</div>
    </div>
  </div>
</template>

<script>
export default {
	name: 'normal',
	props: {
		obj: {
			type: Object,
			default: function () {
				return {
					id: 1,
					title:
            '外媒披露：字节跳动12个月内启动Tik Tok纽约上市将保留控股权将保留控股权将保留控股权',
					origin:
            '广西糖办广西糖办广西糖办广西糖办广西糖办广西糖办广西糖办广西糖办',
					time: '2020-12-24',
					count: '500',
				}
			},
		},
	},
	data() {
		return {}
	},

	methods: {
		seeMore() {
			this.$router.push('/agri-news/' + this.obj.id)
			console.log(this.obj)
		},
	},
}
</script>

<style lang='scss' scoped>
.normal {
  padding: 10px;
  box-sizing: border-box;
  .row-one {
    display: flex;
    margin-bottom: 5px;
    .title {
      // width: 60%;
      //height: 50px;
      //line-height: 25px;
      font-size: 18px;
      overflow: hidden; // 超出的文本隐藏
      text-overflow: ellipsis; // 溢出用省略号显示
      display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
      -webkit-line-clamp: 1; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    }
  }
  .row-two {
    display: flex;
    justify-content: space-between;
    /* height: 30px; */
    line-height: 30px;
    color: #ccc;
    .left {
      display: flex;
      flex: 1 1 auto;
      overflow: hidden;
      .top {
        flex: 0 0 auto;
        margin-right: 5px;
        color: #E8541E;
      }
      .origin {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        flex: 0 0 auto;
        margin: 0 8px;
      }
    }
    .right {
      flex: 0 0 auto;
    }
  }
}
</style>
